<template>
    <div>
        <!-- lyricIndex为当前歌曲播放的进度在歌词中的位置，进而改变正在播放的歌词的样式 -->
        <ul class="lyric" v-show="isShowMusicList" ref="lyric">
            <li :class="{each:true, choose: (index==lyricIndex)}" v-for="(item, key, index) in currentMUsicLyric" :key="key">{{item}}</li>
        </ul>

    </div>
</template>

<script>
import { LyricApi } from '@/request/api';
export default {
    data () {
        return {
            currentMUsicLyric: [],
            lyricIndex: 0,
            isShowMusicList: true,
        }
    },
    watch: {
        // 使用watch监听当前歌曲进度value的变化处理歌词位置
        value() {
            let i = 0
            // 循环歌词对象
            for (let key in this.currentMUsicLyric) {
            // key表示歌词对象中的时间，如果key等于歌曲进度value，改变当前歌词进度		lyricIndex
                if (+key == this.value) {
                    this.lyricIndex = i;
                    // 当歌词进度大于5，即播放到了第5句歌词，开始滚动
                    if (i > 5) {
                        this.$refs.lyric.scrollTop = 30 * (i - 5);
                    }
                }
                i++;
            }
        }

    },
    computed: {
        id() {
            return this.$route.params.id;
        }
    },
    created() {
        // 获取歌词
        LyricApi(this.id).then((res) => {
            // 处理歌词，转化成key为时间，value为歌词的对象
            let lyricArr = res.data.lrc.lyric.split('[').slice(1); // 先以[进行分割
            let lrcObj = {};
            lyricArr.forEach(item => {
                 let arr = item.split(']');	// 再分割右括号
                 // 时间换算成秒
                 let m = parseInt(arr[0].split(':')[0])
                 let s = parseInt(arr[0].split(':')[1])
                 arr[0] = m*60 + s;
                 if (arr[1] != '\n') { // 去除歌词中的换行符
                     lrcObj[arr[0]] = arr[1];
                 }
             })
             // 存储数据
             this.currentMUsicLyric = lrcObj;
         })
    }
}
</script>
 
<style lang = "less" scoped>
    .lyric {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #333;
        // 滚动条
        overflow: auto;
        color: #ddd;
        font-size: 10px;
        font-weight: normal;
        padding: 5px 10px;
        border: 1px solid #000;
        border-left: none;
        .each {
        height: 30px;
        // border: 1px solid #000;
        line-height: 30px;
        text-align: center;
        }
        .choose {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
        }
        // 修改滚动条样式
        &::-webkit-scrollbar {
            width: 3px;
            height: 1px;
        }
        // 滑块部分
        &::-webkit-scrollbar-thumb {
            background-color: #eee;
        }
        // 轨道部分
        &::-webkit-scrollbar-track {
            background-color: #333;
        }
    }

</style>